<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OrderFoodOnline</title>
    <style>
        body {
            background-color: #FFEBCD;
        }
        
        .autostyle2 {
            color: red;
            font-size: 20px;
            text-align: center;
        }
    </style>
</head>

<body bgcolor="#FFEBCD">
    <form action="" name="form123">
        <table border="1">
            <tr class="autostyle2">
                <td colspan="4">OrderFoodOnline</td>
            </tr>
            <tr>
                <td>Name:</td>
                <td><input type="text" name="username" placeholder="Enter Your Name" required></td>
            </tr>
            <tr>
                <td>Date:</td>
                <td><input type="date" name="data" required></td>
            </tr>
            <tr>
                <td>Email ID:</td>
                <td><input type="email" name="usrmail" placeholder="Enter Your Email ID" required></td>
            </tr>
            <tr>
                <td>Contact Number:</td>
                <td><input type="tel" name="usrtel" placeholder="Enter Your phone number" required></td>
            </tr>
            <tr>
                <td>Select Food:</td>
                <td>Non-vegetarian<input type="radio" name="rd1"> Vegetarian <input type="radio" name="rd1">
                </td>
            </tr>

            <tr>
                <td>Select Restaurant:</td>
                <td>
                    <select>
                        <option value="restaurant1">沙县小吃</option>
                        <option value="restaurant2">东北菜馆</option>
                        <option value="restaurant3">海底捞</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>Drinks:</td>
                <td>
                    <select>
                        <option value="drink1">可乐</option>
                        <option value="drink2">雪碧</option>
                        <option value="drink3">王老吉</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>Soups:</td>
                <td>
                    <select>
                        <option value="soup1">冬瓜排骨汤</option>
                        <option value="soup2">莲藕排骨汤</option>
                        <option value="soup3">老母鸡汤</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>Dishes:</td>
                <td>
                    <select>
                        <optgroup label="粤菜">
                            <option value="yue1">白切鸡</option>
                            <option value="yue2">砂锅粥</option>
                        </optgroup>
                        <optgroup label="川菜">
                            <option value="chuan1">麻婆豆腐</option>
                            <option value="chuan2">酸菜鱼</option>
                        </optgroup>
                    </select>
                </td>
            </tr>

            <tr>
                <td>
                    <label for="OrderFor">Order For:</label>
                </td>
                <td>
                    <!-- for 属性规定 label 与哪个表单元素绑定 -->
                    <label for="pickup">Take Away</label>
                    <input type="radio" name="pickup" id="pickup">
                    <label for="home">Home Delivery</label>
                    <input type="radio" name="pickup" id="home">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="address">Address:</label>
                </td>
                <td>
                    <textarea id="address" rows="4" cols="30">Enter your Address Here.</textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="delivery">Delivery:</label>
                </td>
                <td>
                    <input list="data" name="delivery" id="delivery">
                    <datalist id="data">
                        <option value="美团"></option> 
                        <option value="饿了么"></option> 
                        <option value="点我达"></option> 
                    </datalist>
                </td>
            </tr>
            <tr>
                <td style="text-align: right;">
                    <button id="submit" type="submit">Submit</button>
                </td>
                <td>
                    <button id="reset" type="reset">Reset</button>
                </td>
            </tr>

        </table>

        <!-- <fieldset>
            Drinks:
            <select>
                <option value="drink1">可乐</option>
                <option value="drink2">雪碧</option>
                <option value="drink3">王老吉</option>
            </select>
            <input type="text">
        </fieldset> -->
    </form>

    <script>
        document.form123.username.value = "liaochangwang";
        console.log(document.form123.username);
    </script>
</body>

</html>